<template name="verifyOcr">

  <nav-cus  @back="handleNavBack">
   <block v-if="isNotCamera">
      <nav-tips />
    </block>
  <view class="verify-gray-container">
    <!-- Guide page -->
    <view v-if="!cmsConfig.page.ocr.isManualInput && !ocr.isShowTakePhoto && !ocr.isShowResult" class="verify-white-bg">
      <view id="ocr-top">
        <view id="ocr-title">身份证识别</view>
        <image :src="cmsConfig.Common.IsWxNative ? 'https://faceid-verify-temp-1254418846.cos.ap-chengdu.myqcloud.com/images/hint-shibie-green.png' : 'https://faceid-verify-temp-1254418846.cos.ap-chengdu.myqcloud.com/images/hint-shibie-native.png'" />
        <!-- ocr text -->
        <view id="ocr-text">
          <text class='text' v-if="cmsConfig.page.ocr.backend">1. 拍摄身份证原件正反面</text>
          <text class='text' v-else>1. 拍摄身份证原件正面</text>
          <text class='text'>2. 保证照片清晰文字可辨</text>
          <text class='text'>3. 避免照片不全、遮挡、反光</text>
        </view>
        <!-- next btn -->
        <view id="ocr-startbtn" :class="cmsConfig.Common.IsWxNative ? 'index-btnNative' : 'index-btn'"> 
          <button type="primary" @click="ocrStartTakePhoto"  :hover-class="cmsConfig.Common.IsWxNative ? 'btn-hoverNative' : 'btn-hover'">开始识别</button>
        </view>
      </view>
      <risk-tips v-if="cmsConfig.Common.RiskTip"/>
    </view>

    <!-- Take photo or choose the idcard pic from abulm-->
    <view v-if="ocr.isShowTakePhoto && !ocr.isShowResult" class="verify-absolute-bg">
      <view class="verify-absolute-bg" v-if="!ocr.isShowPhotoPreView">
        <view class="verify-ocr-title" :class="ocr.isInfinityDisplayOcrTitle">
          <view :class="cmsConfig.Common.IsWxNative ? 'color-green' : ''">{{ocr.ocrTitle}}</view>
          <risk-tips v-if="cmsConfig.Common.RiskTip"/>
        </view>


        <camera device-position="back" flash="off" binderror="ocrCameraError" class="verify-ocr-frameArea" :class="ocr.isInfinityDisplayOcrMiddle"> 
          <cover-view class="vof-bg" v-if="!ocr.isShowPhotoPreView">
            <cover-image :src="cmsConfig.Common.IsWxNative ? 'https://faceid-verify-temp-1254418846.cos.ap-chengdu.myqcloud.com/images/shibiebgNative.png' : 'https://faceid-verify-temp-1254418846.cos.ap-chengdu.myqcloud.com/images/shibiebg.png'" class="full-weight-height"></cover-image>
          </cover-view>
          <cover-view v-if="!ocr.isShowPhotoPreView && ocr.isFrontIdCard" style="margin-top:80rpx;margin-left:350rpx;">
            <cover-image src="https://faceid-verify-temp-1254418846.cos.ap-chengdu.myqcloud.com/images/ico-head.png" style="width:254rpx;height:285rpx;"></cover-image>
          </cover-view>
          <cover-view v-if="!ocr.isShowPhotoPreView && !ocr.isFrontIdCard"  style="margin-top:80rpx;margin-left:90rpx;">
            <cover-image src="https://faceid-verify-temp-1254418846.cos.ap-chengdu.myqcloud.com/images/ico-guohui.png" style="width:139rpx;height:144rpx:;"></cover-image>
          </cover-view>
        </camera>

        <view class="verify-ocr-pre"  :class="ocr.isInfinityDisplayOcrBottom">
          <view class="verify-ocr-tools"  v-if="ocr.isToolsShow">
            <view v-if="cmsConfig.page.ocr.sourceType > 0" :class="cmsConfig.Common.IsWxNative ? 'vot-album color-green' : 'vot-album'" @click="chooseImg">相册</view>
            <view class="vot-middle">
              <image :src="cmsConfig.Common.IsWxNative ? 'https://faceid-verify-temp-1254418846.cos.ap-chengdu.myqcloud.com/images/ico-cameNative.png' : 'https://faceid-verify-temp-1254418846.cos.ap-chengdu.myqcloud.com/images/ico-came.png'" v-if="!ocr.isShowPhotoPreView" @click="takePhotoWithCamera" />
            </view>
          </view>
        </view>
      </view>

      <view v-if="ocr.isShowPhotoPreView">
        <view class="verify-ocr-title" style="background:none">
          <view :class="cmsConfig.Common.IsWxNative ? 'color-green' : ''">{{ocr.ocrTitle}}</view>
          <risk-tips v-if="cmsConfig.Common.RiskTip"/>
        </view>
        <image :src="ocr.tempImagePath" mode="aspectFit" id="vof-preview" />
        <view class="verify-ocr-pre">
          <view class="verify-ocr-tools"  v-if="ocr.isToolsShow">
            <view v-if="cmsConfig.page.ocr.sourceType > 0" :class="cmsConfig.Common.IsWxNative ? 'vot-album color-green' : 'vot-album'"  @click="chooseImg">相册</view>
            <view class="vot-middle">
              <image :src="cmsConfig.Common.IsWxNative ? 'https://faceid-verify-temp-1254418846.cos.ap-chengdu.myqcloud.com/images/ico-sucNative.png' : 'https://faceid-verify-temp-1254418846.cos.ap-chengdu.myqcloud.com/images/ico-suc.png'" v-if="ocr.isShowPhotoPreView" @click="startUploadAndOcr" />
            </view>
            <view v-if="ocr.isShowPhotoPreView" :class="cmsConfig.Common.IsWxNative ? 'vot-right color-green' : 'vot-right'" @click="reTakePhoto">重拍</view>
          </view>
        </view>
      </view>

    </view>


    <!-- Ocr result page -->
    <view v-show="ocr.isShowResult">
      <!-- ocr title -->
      <view class="ocr-result-title" v-if="!cmsConfig.page.ocr.isIdnameAllowEdit && !cmsConfig.page.ocr.isIdnumberAllowEdit && !cmsConfig.page.ocr.isIdaddressAllowEdit">请确认您的身份信息</view>
      <view class="ocr-result-title" v-else>请确认您的身份信息，若有误请手动修改</view>
      <view id="sms-top">
        <view class="sms-top-sec ocr-result-sec">    
          <view class="sms-input-title"><label>姓名</label></view>
          <view class="sms-ts-input">
             <input type="text" @input="idnameInputChanged" placeholder='请输入姓名' :disabled="!cmsConfig.page.ocr.isIdnameAllowEdit" :value="ocr.idname" maxlength="15"/>
          </view>
        </view>
        <view class="sms-top-sec ocr-result-sec">    
          <view class="sms-input-title"><label>身份证</label></view>
          <view class="sms-ts-input" >
            <input type="idcard" @input="idcartInputChanged" maxlength="18" placeholder='请输入身份证号' :value="ocr.idcard" :disabled="!cmsConfig.page.ocr.isIdnumberAllowEdit"/>
          </view>
        </view>
        <view class="sms-top-sec ocr-result-sec" style="height:146upx" v-show="cmsConfig.page.ocr.isAddress"> 
          <view class="sms-input-title"><label>住址</label></view>   
          <view class="sms-ts-input">
            <textarea   type="text" @input="idaddressInputChanged"  placeholder='请输入住址' :value="ocr.idaddress" :disabled="!cmsConfig.page.ocr.isIdaddressAllowEdit" auto-height="true" style="line-height:1.5em;max-height:4.5em;width:100%" fixed="true"></textarea>
          </view>
        </view>
      </view>
      <view class="hint-error">{{ocr.hintErrorResult}}</view>
      <!-- next btn -->
      <view :class="cmsConfig.Common.IsWxNative ? 'index-btnNative' : 'index-btn'"> 
        <button type="primary" @click="ocrInputGoNext" :disabled="ocr.isForbiddenResultBtn"  :hover-class="cmsConfig.Common.IsWxNative ? 'btn-hoverNative' : 'btn-hover'">下一步</button>
      </view>
      <risk-tips v-if="cmsConfig.Common.RiskTip"/>
    </view>


    <!-- Manual input page -->
    <view v-if="cmsConfig.page.ocr.isManualInput">
      <view class="sms-top">
        <!-- input id numer -->
        <view class="sms-top-phone sms-top-sec" >    
          <view class="sms-ts-input">
            <input type="idcard" auto-focus="true" @input="idcartManualInputChanged" maxlength="18" placeholder='请输入身份证号' />
          </view>
          <view :class="cmsConfig.Common.IsWxNative ? 'sms-ts-btn sms-ts-btn-enable color-green' : 'sms-ts-btn sms-ts-btn-enable'" @click="manualInputTakePhone" v-if="!cmsConfig.page.ocr.isHideTakePhoto" style="font-size:17px;margin-right:5px;">拍照</view>
        </view>
        <!-- input the id name -->
        <view class="sms-top-sec"> 
          <view class="sms-ts-input">
            <input type="text" placeholder='请输入姓名' @input="idnameManualInputChanged"  maxlength="15"/>
          </view>
        </view>
      </view>
      <view class="hint-error">{{ocr.hintError}}</view>
      <!-- next btn -->
      <view :class="cmsConfig.Common.IsWxNative ? 'index-btnNative' : 'index-btn'"> 
        <button type="primary" @click="manualInputGoNext" :disabled="ocr.isForbiddenManualBtn" :hover-class="cmsConfig.Common.IsWxNative ? 'btn-hoverNative' : 'btn-hover'">下一步</button>
      </view>
      <risk-tips v-if="cmsConfig.Common.RiskTip"/>
    </view>
  </view>
    <auth-toast :isShow="show_auth_panel" :authInfo="authInfo" />
    <error-toast :isShow="showErrorMsg" :err="err" @iknow="handleErrReTake()"/>

</nav-cus>
</template>

<script>
import riskTips from "../../components/riskTips/riskTips";
import navCus from "../../components/nav-cus/nav-cus";
import navTips from "../../components/navTips/navTips";
import authToast from "../../components/authToast/authToast";
import errorToast from "../../components/errorToast/errorToast";
import {
  $http,
  $common,
  checkNetWork,
  validate,
  startNativeVerify,
  exitVerify,
  exitVerifyFail,
  reportError,
  Log
} from "../../utils";
import { tokenExceptionArr } from "../../utils/constant";

export default {
  components: {
    riskTips,
    navTips,
    errorToast,
    authToast,
    navCus
  },
  data() {
    return {
      ocr: {
        // page.ocr.isManualInput  use system config to control the manual input or upload
        isShowTakePhoto: false, // is show take photo page
        isShowResult: false, // is show ocr result page
        isShowGuide: true, // is show guide page
        isShowPhotoPreView: false, // is show photo preview
        isPhotoFromCamera: false, // choose the img preview with out frame，take photo preview has frame
        isFrontIdCard: true,
        hintError: "",
        hintErrorResult: "",
        isForbiddenManualBtn: true,
        isForbiddenResultBtn: false,
        idcard: "",
        idname: "",
        idaddress: "",
        tempImagePath: "", // img temp path
        ocrTitle: "请拍摄身份证人像面",
        verifycamFullScreen: "verifycamFullScreen", // 摄像头是否全屏
        isToolsShow: true,
        isEditTheOcrIsManualInput: false,
        isInfinityDisplayOcrTitle: "", // title
        isInfinityDisplayOcrBottom: "", // bottom
        isInfinityDisplayOcrMiddle: "", // middle
        frontMediaKey: "", // 人像面上传后生成的MediaKey
        backendMediaKey: "" // 国徽面上传后生成的MediaKey
      },
      err: {
        error_msg: "",
        ErrorCode: -1
      },
      showErrorMsg: false,
      iKnowFuncs: null, // click I know exec func
      cmsConfig: uni.faceidVerifySdkCmsConfig,
      token: uni.faceidVerifySdkToken,
      baseUrl: uni.faceidVerifySdkBaseUrl,
      curPage: uni.faceidVerifySdkCurPage,
      isNotCamera: true,
      show_auth_panel: false,
      authInfo: "",
      isManualInput: uni.faceidVerifySdkCmsConfig.page.ocr.isManualInput
    };
  },
  onLoad() {
    console.log("ocr");
    this.cmsConfig = uni.faceidVerifySdkCmsConfig;
    this.baseUrl = uni.faceidVerifySdkBaseUrl;
    this.token = uni.faceidVerifySdkToken;
    this.curPage = uni.faceidVerifySdkCurPage;
    this.isManualInput = this.cmsConfig.page.ocr.isManualInput ;
    if (!this.cmsConfig.page.ocr.isManualInput) {
      //  授权
      this.getAuth();
    }
  },
  methods: {
    handleNavBack(){
      this.isNotCamera = true
      if(this.isManualInput){
        if(!this.cmsConfig.page.ocr.isManualInput && !this.ocr.isShowTakePhoto && !this.ocr.isShowResult){
          this.cmsConfig.page.ocr.isManualInput = true ;
        }else if(this.ocr.isShowTakePhoto && !this.ocr.isShowResult){
          if(this.ocr.isShowPhotoPreView){
            this.reTakePhoto()
          }else{
            this.cmsConfig.page.ocr.isManualInput = false
            this.ocr.isShowTakePhoto = false ;
            this.ocr.isShowResult = false ;
          }
        }else{
          uni.faceidVerifySdkCmsConfig.page.ocr.isManualInput = true;
          this.cmsConfig.page.ocr.isManualInput = true;
          uni.navigateBack()
        }
      }else{
       if(this.ocr.isShowTakePhoto && !this.ocr.isShowResult){
         this.ocr.isFrontIdCard = true;
          this.ocr.ocrTitle = "请拍摄身份证人像面";
          if(this.ocr.isShowPhotoPreView){
            this.reTakePhoto()
          }else{
            this.cmsConfig.page.ocr.isManualInput = false
            this.ocr.isShowTakePhoto = false ;
            this.ocr.isShowResult = false ;
          }
        }else{
          uni.navigateBack()
        }
      }
    },
    // start Auth
    getAuth() {
      uni.authorize({
        scope: "scope.camera",
        success: () => {},
        fail: () => {
          console.log("您未允许使用摄像头权限");
        },
        complete: () => {
          uni.getSetting({
            success: res => {
              console.log("获取授权信息成功");
              var isRecordAuthOk = res.authSetting["scope.record"];
              var isCameraAuthOk = res.authSetting["scope.camera"];
              if (isCameraAuthOk) {
                this.show_auth_panel = false;
                this.authInfo = "摄像头已授权";
              } else {
                this.show_auth_panel = true;
                this.authInfo = "摄像头未授权";
              }
            },
            fail: e => {
              console.log("获取收取信息失败", e);
            }
          });
        }
      });
    },
    // ocr - StartTakePhoto
    ocrStartTakePhoto() {
      checkNetWork(() => {
        this.ocr.isShowTakePhoto = true;
        this.isNotCamera = false;
      }, this.showErrorToast);
    },
    // ocr - choose img
    chooseImg() {
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album"],
        success: res => {
          var tempFilePaths = res.tempFilePaths;
          this.ocr.tempImagePath = tempFilePaths[0];
          this.ocr.isShowPhotoPreView = true;
          this.ocr.ocrTitle = "照片预览";
          this.ocr.isPhotoFromCamera = false;
          this.ocr.isToolsShow = false; // 先false
          this.ocr.isToolsShow = true; // 再 true , 解决 cover-view iOS渲染问题，wx:if时 后渲染的在上面，z-index无效
        }
      });
    },
    // ocr - take photo with camera
    takePhotoWithCamera() {
      const ctx = wx.createCameraContext();
      ctx.takePhoto({
        quality: "noraml",
        success: res => {
          console.log(res.tempImagePath);
          this.ocr.tempImagePath = res.tempImagePath;
          this.ocr.isShowPhotoPreView = true;
          this.ocr.ocrTitle = "照片预览";
          this.ocr.isPhotoFromCamera = true;
        },
        fail: e => {
          uni.showToast({
            title: "takePhoto function exception",
            icon: "none"
          });
        }
      });
    },
    // ocr - start upload pic and ocr
    startUploadAndOcr() {
      // confrim the network is ok
      checkNetWork(() => {
        uni.showLoading({
          title: "系统识别中",
          mask: true
        });

        let upload_req = {
          file: this.ocr.tempImagePath
        };
        console.log("upfile data", upload_req);
        // upload
        wx.uploadFile({
          url: `${uni.faceidVerifySdkBaseUrl}/api/common/upLoadWxAppFile?BizToken=${
            uni.faceidVerifySdkToken
          }`,
          filePath: this.ocr.tempImagePath,
          name: "file",
          formData: upload_req,
          success: res => {
            console.log("uploadFile | ", res);
            if (res.statusCode === 200) {
              let resTemp = JSON.parse(res.data);
              if (resTemp.ErrorCode === 0) {
                $http(
                  {
                    url: `/api/ocr/ocrinfo?BizToken=${uni.faceidVerifySdkToken}`,
                    method: "POST",
                    data: {
                      MediaKey: resTemp.Data.MediaKey,
                      PicType: this.ocr.isFrontIdCard ? 0 : 1 // ocr识别的文件类型
                    }
                  },
                  res => {
                    console.log("res", res);
                    uni.hideLoading();
                    if (res.ErrorCode === 0) {
                      // OCR成功
                      if (this.ocr.isFrontIdCard) {
                        this.ocr.idcard = res.Data.id;
                        this.ocr.idname = res.Data.name;
                        this.ocr.idaddress = res.Data.address;
                      }
                      // go to next, reverse side or result page
                      if (
                        this.ocr.isFrontIdCard &&
                        uni.faceidVerifySdkCmsConfig.page.ocr.backend
                      ) {
                        // reverse side
                        this.ocr.tempImagePath = "";
                        this.ocr.isShowPhotoPreView = false;
                        this.ocr.ocrTitle = "请拍摄身份证国徽面";
                        this.ocr.isFrontIdCard = false;
                        return;
                      } else {
                        // goto result Page
                        this.ocr.isShowResult = true;
                        this.isNotCamera = true;
                        this.ocr.verifycamFullScreen = "verifycamFullScreen";
                      }
                    } else {
                      // 如果出现 14(本次校验已完成) 15 (token过期)的错误，退出验证
                      if (tokenExceptionArr.includes(res.ErrorCode)) {
                        exitVerifyFail(res);
                        return;
                      }
                      this.showErrorToast(res);
                      reportError(Log.ocrinfoErr, res);
                    }
                  }
                );
              } else {
                uni.hideLoading();
                this.showErrorToast({
                  ErrorCode: 101,
                  ErrorMsg: resTemp.ErrorMsg
                });
                reportError(Log.ocrinfoUploadErr, res);
              }
            } else {
              uni.hideLoading();
              this.showErrorToast({ ErrorCode: 101, ErrorMsg: "上传图片失败" });
            }
          },
          fail: e => {
            console.log("upload img fail", e);
            uni.hideLoading();
            this.showErrorToast({ ErrorCode: 101, ErrorMsg: "上传图片失败" });
            reportError(Log.ocrinfoUploadFail, res);
          }
        });
      }, this.showErrorToast);
    },

    // ocr - idnameInputChanged
    idnameInputChanged(e) {
      this.ocr.idname = e.detail.value;
      this.ocrCommonInputCheck();
    },

    // ocr - idcartInputChanged
    idcartInputChanged(e) {
      this.ocr.idcard = e.detail.value;
      this.ocrCommonInputCheck();
    },

    // ocr - idaddressInputChanged
    idaddressInputChanged(e) {
      this.ocr.idaddress = e.detail.value;
      this.ocrCommonInputCheck();
    },

    // ocr - common input check
    ocrCommonInputCheck() {
      this.ocr.hintErrorResult = "";
      var isIdcardOk = validate(this.ocr.idcard, "idcard");
      var isIdnameOk = validate(this.ocr.idname, "idname");
      var isIdaddressOk = validate(this.ocr.idaddress, "idaddress");
      var isForbiddenResultBtn = true;

      if (isIdcardOk && isIdnameOk) {
        isForbiddenResultBtn = false;
      }

      if (uni.faceidVerifySdkCmsConfig.page.ocr.isAddress && !isIdaddressOk) {
        isForbiddenResultBtn = true;
      }
      this.ocr.isForbiddenResultBtn = isForbiddenResultBtn;
    },

    // ocr - ocrInputGoNext
    ocrInputGoNext(e) {
      // 校验信息是否ok
      var isIdcardOk = validate(this.ocr.idcard, "idcard");
      if (!isIdcardOk) {
        this.ocr.hintErrorResult = "身份证号格式错误";
        return;
      }
      var isIdnameOk = validate(this.ocr.idname, "idname");
      if (!isIdnameOk) {
        this.ocr.hintErrorResult = "姓名格式错误";
        return;
      }
      if (uni.faceidVerifySdkCmsConfig.page.ocr.isAddress) {
        var isIdaddressOk = validate(this.ocr.idaddress, "idaddress");
        if (!isIdaddressOk) {
          this.ocr.hintErrorResult = "住址格式错误";
          return;
        }
      }
      // format check ok
      console.log("go next");
      this.ocrCommonInputGoNext(false);
    },
    // ocr - manualInput idcartManualInputChanged
    idcartManualInputChanged(e) {
      var idcard = e.detail.value;
      this.ocr.idcard = idcard;
      this.manualInputChanged();
    },

    // ocr - manualInput idnameManualInputChanged
    idnameManualInputChanged(e) {
      var idname = e.detail.value;
      this.ocr.idname = idname;
      this.manualInputChanged();
    },

    // ocr - common manual input
    manualInputChanged(e) {
      this.ocr.hintError = "";
      var isIdcardOk = validate(this.ocr.idcard, "idcard");
      var isIdnameOk = validate(this.ocr.idname, "idname");
      var isForbiddenManualBtn = true;

      // if (isIdcardOk && isIdnameOk) {
      if (!isIdcardOk && this.ocr.idcard.length === 18) {
        this.ocr.hintError = "身份证号有误，请确认后重新输入";
      } else if (isIdcardOk) {
        if (isIdnameOk) {
          isForbiddenManualBtn = false;
        }
        this.ocr.isForbiddenManualBtn = isForbiddenManualBtn;
      }
    },

    // ocr - manualInput manualInputGoNext
    manualInputGoNext() {
      this.ocrCommonInputGoNext(true);
    },

    // ocr - common input go next
    ocrCommonInputGoNext(isManualInput) {
      // Confrim that the network is ok
      checkNetWork(() => {
        var cmsConfig = uni.faceidVerifySdkCmsConfig;
        // if (cmsConfig.page.ocr.isCheckIDInfo) {
        uni.showLoading({
          title: "校验身份信息中...",
          mask: true
        });
        //Android系统增加300ms延迟提交解决手写输入法提交时最后一个字丢失的问题
        let delay = 0;
        if (wx.verifySysInfo.platform === "android") {
          delay = 300;
        }
        setTimeout(() => {
          // check the id and name
          // 如果Address有值，有更新address
          const data = {
            Name: this.ocr.idname,
            IdCard: this.ocr.idcard
          };
          if (this.ocr.idaddress) {
            data.Address = this.ocr.idaddress;
          }
          $http(
            {
              url: `/api/ocr/updateidinfo?BizToken=${uni.faceidVerifySdkToken}`,
              method: "POST",
              data,
              reTry: {
                tryCount: 3
              }
            },
            res => {
              uni.hideLoading();
              // If check id and name is ok
              if (res.ErrorCode === 0) {
                this.ocrGoNext(isManualInput);
              } else {
                // 如果出现 14(本次校验已完成) 15 (token过期)的错误，退出验证
                if (tokenExceptionArr.includes(res.ErrorCode)) {
                  exitVerifyFail(res);
                  return;
                }
                // check id and name fail
                if (!isManualInput) {
                  this.ocr.hintErrorResult = res.ErrorMsg;
                } else {
                  this.ocr.hintError = res.ErrorMsg;
                }
                reportError(Log.updateIdinfoErr, res);
                return;
              }
            }
          );
        }, delay);
      }, this.showErrorToast);
    },

    // ocr common gonext
    ocrGoNext(isManualInput) {
      var cmsConfig = uni.faceidVerifySdkCmsConfig;
      if (cmsConfig.page.ocr.isCheckIDInfo) {
        $http(
          {
            url: `/api/ocr/checkidinfo?BizToken=${uni.faceidVerifySdkToken}`,
            method: "POST",
            data: {
              Name: this.ocr.idname,
              IdCard: this.ocr.idcard
            },
            reTry: {
              tryCount: 3
            }
          },
          res => {
            console.log("res", res);
            if (res.ErrorCode === 0) {
              this.ocrGoNextEnd();
            } else {
              // 如果出现 14(本次校验已完成) 15 (token过期)的错误，退出验证
              if (tokenExceptionArr.includes(res.ErrorCode)) {
                exitVerifyFail(res);
                return;
              }
              // check id and name fail
              if (!isManualInput) {
                this.ocr.hintErrorResult = res.ErrorMsg;
              } else {
                this.ocr.hintError = res.ErrorMsg;
              }
              this.errorInfo = errorInfo;
              reportError(Log.checkIdinfoErr, res);
              return;
            }
          }
        );
      } else {
        this.ocrGoNextEnd();
      }
    },

    // ocr common gonext next opt
    ocrGoNextEnd() {
      console.log("ocrGoNextEnd");
      if (uni.faceidVerifySdkCmsConfig.isJustOcr) {
        exitVerify({
          id_name: this.ocr.idname,
          id_number: this.ocr.idcard,
          id_address: this.ocr.idaddress
        });
      } else {
        // 如果是原生接口
        if (uni.faceidVerifySdkCmsConfig.Common.IsWxNative) {
          startNativeVerify(uni.faceidVerifySdkCmsConfig);
          return;
        }
        $common.setCurPage({ url: "verifyLivingBody" });
      }
    },
    // ocr - manualInput manualInputTakePhone
    manualInputTakePhone() {
      this.cmsConfig.page.ocr.isManualInput = false;
      this.ocr.isEditTheOcrIsManualInput = true; // 这里用来返回时，校验是否返回手输页面
    },
    // open errorToast
    showErrorToast(err) {
      // Because in the ocr result page, the <textarea> is top tier, it keep out the errToast Panel, So show the error in the hint error
      if (this.ocr.isShowResult) {
        this.ocr.hintErrorResult = err.error_msg;
        return;
      }

      this.showErrorMsg = true;
      this.err = err;
    },
    handleErrReTake() {
      if (
        this.ocr.isShowTakePhoto &&
        this.err.ErrorCode !== 101 &&
        this.err.ErrorCode !== -107
      ) {
        this.reTakePhoto();
      }
    },
    // ocr re-take photo
    reTakePhoto() {
      console.log("reTakePhoto");
      this.ocr.tempImagePath = "";
      this.ocr.isShowPhotoPreView = false;
      this.ocr.ocrTitle = this.ocr.isFrontIdCard
        ? "请拍摄身份证人像面"
        : "请拍摄身份证国徽面";
    }
  }
};
</script>

<style scoped>
.verify-gray-container {
  background-color: #f8f8f8;
}
#ocr-top {
  width: 450rpx;
  margin: 0 auto;
}

#ocr-top image {
  height: 338rpx;
  width: 473rpx;
  margin-bottom: 30rpx;
  margin-left: -12rpx;
}

#ocr-title {
  margin: 50rpx 0 60rpx 0;
  text-align: center;
}

#ocr-text {
  margin-left: 50rpx;
}

#ocr-text .text {
  display: block;
  margin-bottom: 10rpx;
  font-size: 28rpx;
}

#ocr-startbtn {
  margin: 60rpx 0 0 0;
}

#ocr-startbtn button {
  width: 450rpx;
}

#ocr-checkboxview {
  margin-left: 1px;
  margin-top: 5px;
}
.index-btn,
.index-btnNative {
  margin: 30rpx 30rpx 10rpx 30rpx;
}


.hint-error {
  padding: 10px;
  color: #ef4b46;
  font-size: 14px;
  height: 19px;
}

.index-btn button {
  background-color: #2d72f1;
  color: white;
}

.index-btnNative button {
  /* background-color:#2d72f1; */
  color: white;
}

button[disabled] {
  background: #b3b3b3 !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.index-btnNative button[disabled] {
  color: rgba(255, 255, 255, 0.6) !important;
}
.index-btnNative button[disabled][type="primary"] {
  background-color: #9ed99d !important;
}
.verify-ocr-title {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 52rpx;
  text-align: center;
  color: #2574ea;

  height: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.isInfinityDisplayOcrTitle {
  height: 450rpx;
}
.ocr-camera-left {
  position: absolute;
  top: 300rpx;
  width: 40rpx;
  left: 0;
  height: 470rpx;
  background: #fff;
}
.ocr-camera-right {
  position: absolute;
  top: 300rpx;
  width: 40rpx;
  right: 0;
  height: 470rpx;
  background: #fff;
}
.verify-ocr-frameArea {
  position: absolute;
  top: 300rpx;
  left: 40rpx;
  width: 670rpx;
  height: 462rpx;
  margin: 0 auto;
}
.isInfinityDisplayOcrMiddle {
  top: 450rpx;
}
.verify-ocr-pre {
  position: absolute;
  top: 762rpx;
  bottom: 0;
  width: 100%;
  background: #fff;
}
.isInfinityDisplayOcrBottom {
  top: 912rpx;
}
.sms-ts-input {
  flex:1;
}

.vof-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

#vof-preview {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 3;
}

.verify-ocr-tools {
  position: absolute;
  bottom: 85rpx;
  left: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  width: 100%;
  height: 112rpx;
  text-align: center;
}

.vot-album {
  margin-left: 20px;
  padding: 20px;
  font-size: 32rpx;
  color: #2574ea;
}

.vot-middle {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -56rpx;
  z-index: 1000;
}

.vot-middle image {
  width: 112rpx;
  height: 112rpx;
  margin-top: -20px;
  margin-left: -20px;
  padding: 20px;
}
.vot-middle cover-image {
  width: 112rpx;
  height: 112rpx;
  margin-top: -20px;
  margin-left: -20px;
  padding: 20px;
}

.vot-right {
  position: absolute;
  padding: 20px;
  right: 20px;
  font-size: 32rpx;
  color: #2574ea;
}

.ocr-result-title {
  padding: 0.77em 15px 0.3em;
  color: #999999;
  font-size: 14px;
}

.sms-input-title {
  width: 80px;
  text-align: left;
}

.ocr-result-sec {
  height: 100%;
  min-height: 45px;
  border-bottom: 0.5px solid #eee;
}

.sms-top {
  width: 100%;
  background: #fff;
}

.sms-top-sec {
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 104upx;
  padding: 0 30upx;
}

.sms-top-phone {
  border-bottom: 1px solid rgb(228, 228, 228);
}

.sms-ts-img {
  display: flex;
  align-items: center;
}

.sms-ts-img image {
  height: 25px;
  width: 20px;
  margin-right: 16px;
}

.sms-ts-btn {
  min-width: 100px;
  text-align: right;
  font-size: 14px;
  color: #888;
  padding: 10px 0;
}

.sms-ts-btn-enable {
  color: #2d72f1;
}
.verify-white-bg {
  background: #fff;
}
.color-green {
  color: #04be02 !important;
}
</style>
